<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>TAB切换</title>
	<meta name="keywords" content="" />
	<meta name="Description" content="" />
	<style>
		*{margin:0;padding:0;}
		ul,ol {list-style-type:none;}
		.tab {width:400px;height:300px;margin:0 auto;border:1px solid #999;position:relative;overflow:hidden;}
		.clear {clear:both;height:0;overflow:hidden;}
		.con2warp {height:300px;}
		#con2 {overflow:hidden;width:9000px;height:300px;position:absolute;display:table;}
		#con2 td {float:left;display:table-cell;}
		#con2 td img {width:400px;height:300px;}
		#con2 td.show {display:block;}
		.navps {width:100%;height:25px;padding-top:7px;position:absolute;left:0;bottom:0;z-index:1;background:white;border-top:1px solid #666;opacity:0.8;filter:alpha(opacity=80);-moz-user-select:none;}
		#nav2 {float:left;}
		#nav2 li {width:16px;height:16px;float:left;line-height:16px;text-align:center;font-size:12px;font-family:Tahoma,sans-serif;font-weight:bold;margin-left:10px;cursor:pointer;}
		#nav2 li.hover {background:url(img/bg.png) 0 0 no-repeat;color:#fff;}
		
		#left2,#right2 {width:16px;height:16px;float:left;margin-left:20px;display:inline;background:url(img/bgl.png) 0 0 no-repeat;}
		#right2
		{background:url(img/bgr.png) 0 0 no-repeat;}
		#left2.showp {background-image:url(img/bglh.png)}
		#right2.showp {background-image:url(img/bgrh.png)}
	</style>
	<script language="javascript">
	function $(id){return typeof id=="string"?document.getElementById(id):id;}
	function $$(id,tagname){return typeof id=="string"?document.getElementById(id).getElementsByTagName(tagname):id.getElementsByTagName(tagname);}
	//构造函数---初始化变量
	function AddTab(idNav,idCon,idLeft,idRight,idNavSun,idConSun){
		oTa=this;
		this.idNav=$(idNav);
		this.idCon=$(idCon);
		this.idLeft=$(idLeft);
		this.idRight=$(idRight);
		this.navLiList=$$(idNav,idNavSun);
		this.conLiList=$$(idCon,idConSun);
		this.navLength=$$(idNav,idNavSun).length;
		this.conLength=$$(idNav,idConSun).length;
		this.idConNNum,this.idConENum;
		this.conMoving=false;
	}
	//构造函数---初始化方法
	AddTab.prototype={
		constructor : AddTab,
		addHd : function(oT,sT,fN){
			if (oT.addEventListener){
				oT.addEventListener(sT,fN,false);
			}
			else {
				oT["on"+sT]=fN;
			}
		},//事件监听器
		classTab : function(e,leftOrR){
			var nowFocus=this.nowFocus();
			var eNum;
			if (typeof leftOrR!="undefined")
			{
				if (leftOrR=="left")
				{
					if (nowFocus==0){
						this.navLiList[nowFocus].className="";
						this.navLiList[this.navLength-1].className="hover";
						this.changeP(nowFocus,this.navLength-1);
					}
					else{
						this.navLiList[nowFocus].className="";
						this.navLiList[nowFocus-1].className="hover";
						this.changeP(nowFocus,nowFocus-1);
					}
				}
				else if (leftOrR=="right"){
					if (nowFocus==this.navLength-1){
						this.navLiList[nowFocus].className="";
						this.navLiList[0].className="hover";
						this.changeP(nowFocus,0);
					}
					else{
						this.navLiList[nowFocus].className="";
						this.navLiList[nowFocus+1].className="hover";
						this.changeP(nowFocus,nowFocus+1);
					}

					//this.changeP(nowFocus,eNum+1);
				}
			}
			else {
				for (i=0;i<this.navLength ;i++ )
				{				
					if (this.navLiList[i]==e)
					{
						this.navLiList[i].className="hover";
						this.changeP(nowFocus,i);//这两行写反，后果很严重……
					}
					else{this.navLiList[i].className="";}

					//this.navLiList[i].className=this.navLiList[i]==e?"hover":"";
					//this.conLiList[i].className=this.navLiList[i]==e?"show":"";
				}
			}
		},//切换class
		changeP : function(sNum,eNum){
			imgW=400;
			//alert(oTa.idConNNum);
			if (oTa.idConNNum==undefined)
			{oTa.idConNNum=imgW*sNum;}
			oTa.idConENum=-imgW*eNum;
			//setTimeout("var aaa=oTa.nowFocus();alert(aaa);",10);
			//alert(oTa.idConNNum);
			//alert(oTa.idConENum);
			if (oTa.idConNNum-oTa.idConENum>0)
			{
				if (oTa.conMoving==true)
				{
					clearInterval(a);oTa.conMoving=false;oTa.classTab(oTa.navLiList[eNum]);return;
				}
				oTa.conMoving=true;
				a=setInterval("oTa.changePl('l')",10);
				
			}
			else if (oTa.idConNNum-oTa.idConENum<0)
			{
				if (oTa.conMoving==true)
				{
					clearInterval(a);oTa.conMoving=false;oTa.classTab(oTa.navLiList[eNum]);return;
				}
				oTa.conMoving=true;
				a=setInterval("oTa.changePl('r')",10);
				
			}	
		},
		changePl : function(at){
			if (oTa.idConNNum==oTa.idConENum)
			{
				clearInterval(a);
				oTa.conMoving=false;
			}
			else if (at=="l")
			{
				oTa.idConNNum=oTa.idConNNum-5;oTa.idCon.style.left=oTa.idConNNum+"px";return;
			}
			else if (at=="r")
			{
				oTa.idConNNum=oTa.idConNNum+5;oTa.idCon.style.left=oTa.idConNNum+"px";return;
			}
			
		},
		addHdEach : function(){
			for (i=0;i<this.navLength ;i++ )
			{
				oTa.addHd(oTa.navLiList[i],"mouseover",function(){oTa.classTab(this);})
			}
			oTa.addHd(oTa.idLeft,"click",function(){
				oTa.classTab("","left")
			});
			oTa.addHd(oTa.idRight,"click",function(){
				oTa.classTab("","right")
			});
			/*oTa.addHd(oTa.idLeft,"mousedown",function(){
				this.className="showp";
			});
			oTa.addHd(oTa.idLeft,"mouseup",function(){
				this.className="";
			});
			oTa.addHd(oTa.idRight,"mousedown",function(){
				this.className="showp";
			});
			oTa.addHd(oTa.idRight,"mouseup",function(){
				this.className="";
			});*/
			oTa.idNav.onselectstart=function(){return false;};
			oTa.idLeft.onselectstart=function(){return false;};
			oTa.idRight.onselectstart=function(){return false;};
		},//为每个对象增加事件监听
		nowFocus : function(){
			for (o=0;o<oTa.navLength ;o++ )
			{
				if (oTa.navLiList[o].className=="hover") return o;
			}
		}//返回当前聚焦元素的下标
	}
	window.onload=function(){
	var person1 = new AddTab("nav2","con2","left2","right2","li","td");
	person1.addHdEach();//为新标签触发绑定事件。
	}
	</script>
</head>
<body>
	<div class="tab">

		<table class="con2warp" cellspacing="0">
			<tr ID="con2">
				<td class="show"><img src="img/1.jpg" /></li>
				<td><img src="img/2.jpg" /></li>
				<td><img src="img/3.jpg" /></li>
				<td><img src="img/4.jpg" /></li>
			</tr>
		</table>
		<div class="navps">
			<a id="left2"></a>
			<ul ID="nav2">
				<li class="hover">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
			<a id="right2"></a>
		</div>
	</div>
</body>

</html>